import {Button, Form, Input, Select, Upload, Switch, DatePicker, Space, InputNumber} from "antd";
import API from "../../api/api";
import React from "react";
import Edit from "../CKEditor/Edit";
import {config, url} from "../../util/config";
import PicturesWall from '../IndexManage/PicturesWall'
import { UploadOutlined } from '@ant-design/icons';

const {RangePicker } = DatePicker;
let token = localStorage.getItem("token")
const request = {
    name: 'file',
    action: url.file_upload_url,
    headers: {
        'Accept': "application/json",
        'Authorization': token
    },
}

export default function InsertFormForActivity(props){
    let imageUrl = null;
    let editorVisible = null;
    let applyStartTime = null;
    let applyEndTime = null;
    let startTime = null;
    let endTime = null;
    const [form] = Form.useForm();
    //是否执行了刷新
    let hasFlashed = false;

    const onReset = () => {
        form.resetFields();
    };

    const onFinish = (values) => {
        if(values.new==undefined || values.new==null || values.new == ""){
            values.new = config.notify_date
        }
        if(imageUrl!=null&&imageUrl!=undefined){
            values.figure=imageUrl;
        }
        if(editorVisible==null || editorVisible=="<p></p>"){
            alert("文章内容不可为空")
            return
        }else {
            values.content = editorVisible
        }
        // if(editorVisible!=null && editorVisible!=undefined&&editorVisible!='<p></p>'){
        //     values.content = editorVisible;
        // }
        if(values.attach!=undefined){
            values.attachUrls = []
            values.attachNames = []
            values.attachNum = 0;
            let tmpList = values.attach.fileList;
            for(let i=0;i<tmpList.length;i++){
                values.attachUrls.push(tmpList[i].response.result[0].FILE_URL)
                values.attachNames.push(tmpList[i].response.result[0].FILE_URL_NAME)
                ++values.attachNum
            }
        }
        //报名时间
        if(values.applyStartTime!=undefined){
            values.applyStartTime=applyStartTime
            values.applyEndTime=applyEndTime
        }
        //开始时间
        if(values.startTime!=undefined){
            values.startTime=startTime;
            values.endTime=endTime;
        }
        if(values.status==true){
            values.status='Y'
        }else if(values.status==false){
            values.status='N'
        }
        console.log(values)
        if(API.insertActivity(values)=="ok"){
            if(!hasFlashed){
                //只有返回成功后，才会置父组件的状态值为true，即Modal关闭后实现列表刷新
                props.result(true)
                //执行上一步后，再本组件也加一个标记，来标识已经重置了父组件的刷新状态值status
                hasFlashed = true;
            }
        }
    };

    function getContent(content) {
        // data = content
        editorVisible=content
    }

    function getImageUrl(url){
        imageUrl = url
    }

    function getStartAndEndTime(value, dateString) {
        console.log('Selected Time: ', value);
        console.log('Formatted Selected Time: ', dateString);
        startTime = dateString[0]
        endTime = dateString[1]
    }

    function getApplyStartAndEndTime(value, dateString) {
        console.log('Selected Time: ', value);
        console.log('Formatted Selected Time: ', dateString);
        applyStartTime = dateString[0];
        applyEndTime = dateString[1];
    }

    return (
        <Form
            preserve={false}
            form={form}
            onFinish={onFinish}
            onReset={onReset}
            labelCol={{
                span: 4,
            }}
            wrapperCol={{
                span: 17,
            }}
            layout="horizontal"
            initialValues={{
                ['new']: config.notify_date
            }}
        >
            <Form.Item label="活动标题" name="name" rules={[{ required: true }]}>
                <Input />
            </Form.Item >
            <Form.Item label="活动描述" name={"desc"} >
                <Input />
            </Form.Item>
            <Form.Item label="活动配图" name={"figure"}>
                <PicturesWall render={getImageUrl}/>
            </Form.Item>
            <Form.Item label="提醒時間【天數】" name="new">
                <InputNumber min={1} placeholder={`默認${config.notify_date}天`}/>
            </Form.Item>
            <Form.Item label="是否置顶" name={"status"} >
                <Switch />
            </Form.Item>
            <Form.Item label="报名时间" name={"applyStartTime"} >
                <RangePicker  showTime onChange={getApplyStartAndEndTime}/>
            </Form.Item>
            <Form.Item label="活动时间" name={"startTime"} >
                <RangePicker showTime onChange={getStartAndEndTime}/>
            </Form.Item>
            <Form.Item label="活动地点" name={"station"} >
                <Input />
            </Form.Item>
            <Form.Item label="活动附件" name={"attach"} >
                <Upload name="file" {...request} listType="picture">
                    <Button icon={<UploadOutlined />}>上传</Button>
                </Upload>
            </Form.Item>

            <Form.Item
                name="content"
                label="活动内容"
                rules={[{required:true}]}
            >
                {/*<Button onClick={_=>alert(editorVisible)}>获取文件内容</Button>*/}
                <Edit onChange={getContent}></Edit>
            </Form.Item>

            {/*<RoleForm.Item label="是否启用" name={"moduleStart"} rules={[{ required: true }]}>*/}
            {/*    <Switch />*/}
            {/*</RoleForm.Item>*/}
            <Form.Item
                label="提交添加"
                name="commit"
            >
                <Button type="primary" htmlType="submit">
                    提交
                </Button>
                <Button htmlType="reset" style={{marginLeft:"1rem"}}>
                    重置
                </Button>
            </Form.Item>
        </Form>
    );
}
